<template>
  <a-menu v-model:selectedKeys="selectedKeys" mode="inline" theme="light">
    <a-menu-item key="1">
      <template #icon>
        <PieChartOutlined />
      </template>
      <span>首页</span>
    </a-menu-item>
    <a-menu-item key="2">
      <template #icon>
        <DesktopOutlined />
      </template>
      <span>关于我们</span>
    </a-menu-item>
    <a-menu-item key="3">
      <template #icon>
        <DesktopOutlined />
      </template>
      <span>合作交流</span>
    </a-menu-item>
  </a-menu>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  PieChartOutlined,
  MailOutlined,
  DesktopOutlined,
  InboxOutlined,
  AppstoreOutlined,
} from '@ant-design/icons-vue'
export default defineComponent({
  components: {
    MenuFoldOutlined,
    MenuUnfoldOutlined,
    PieChartOutlined,
    MailOutlined,
    DesktopOutlined,
    InboxOutlined,
    AppstoreOutlined,
  },
  setup() {
    const state = reactive({
      collapsed: false,
      selectedKeys: ['1'],
    })

    return {
      ...toRefs(state),
    }
  },
})
</script>
